export default {
  name: 'Forbidden',
  props: {
    title: { type: String, default: '对不起, 好像出错了~' },
    description: { type: String, default: '' },
    banner: { type: String, default: 'https://iamgx.oss-cn-shanghai.aliyuncs.com/travel/heihei.gif' }
  },
  render(h: any) {
    return h('section', { class: 'bg-[#FBFBFB] dark:bg-gray-900' }, [
      h('div', { class: 'container min-h-screen px-6 py-12 mx-auto lg:flex lg:items-center lg:gap-12' }, [
        h('div', { class: 'wf-ull lg:w-1/2' }, [
          h('h1', { class: 'mt-3 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl' }, this.title),
          h('p', { class: 'mt-4 text-gray-500 dark:text-gray-400' }, this.description),

          h('div', { class: 'flex items-center mt-6 gap-x-3' }, [
            h(
              'a',
              {
                attrs: { href: '/' },
                class:
                  'flex items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 transition-colors duration-200 bg-white border rounded-lg gap-x-2 sm:w-auto dark:hover:bg-gray-800 dark:bg-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:border-gray-700'
              },
              [h('span', '返回首页')]
            )
          ])
        ]),
        h('div', { class: 'relative w-full mt-12 lg:w-1/2 lg:mt-0' }, [
          h('img', {
            class: 'w-full max-w-lg lg:mx-auto',
            attrs: { src: this.banner, alt: '' }
          })
        ])
      ])
    ])
  }
}
